<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="文章名称" prop="articleName">
      <el-input v-model="dataForm.articleName" placeholder="文章名称"></el-input>
    </el-form-item>
    <el-form-item label="标题图" prop="acticleImg">
      <el-input v-model="dataForm.acticleImg" placeholder="标题图"></el-input>
    </el-form-item>
    <el-form-item label="创建人" prop="creator">
      <el-input v-model="dataForm.creator" placeholder="创建人"></el-input>
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
    </el-form-item>
    <el-form-item label="分类id" prop="categoryId">
      <el-input v-model="dataForm.categoryId" placeholder="分类id"></el-input>
    </el-form-item>
    <el-form-item label="文章状态" prop="articeStatus">
      <el-input v-model="dataForm.articeStatus" placeholder="文章状态"></el-input>
    </el-form-item>
    <el-form-item label="文章内容" prop="articleContent">
      <el-input v-model="dataForm.articleContent" placeholder="文章内容"></el-input>
    </el-form-item>
    <el-form-item label="是否原创" prop="ifOriginal">
      <el-input v-model="dataForm.ifOriginal" placeholder="是否原创"></el-input>
    </el-form-item>
    <el-form-item label="原创者" prop="originator">
      <el-input v-model="dataForm.originator" placeholder="原创者"></el-input>
    </el-form-item>
    <el-form-item label="原创来源" prop="originalSource">
      <el-input v-model="dataForm.originalSource" placeholder="原创来源"></el-input>
    </el-form-item>
    <el-form-item label="推荐出处" prop="recommendId">
      <el-input v-model="dataForm.recommendId" placeholder="推荐出处"></el-input>
    </el-form-item>
    <el-form-item label="点击数" prop="clickNum">
      <el-input v-model="dataForm.clickNum" placeholder="点击数"></el-input>
    </el-form-item>
    <el-form-item label="开启评论" prop="openComments">
      <el-input v-model="dataForm.openComments" placeholder="开启评论"></el-input>
    </el-form-item>
    <el-form-item label="文章简介" prop="articleDesc">
      <el-input v-model="dataForm.articleDesc" placeholder="文章简介"></el-input>
    </el-form-item>
    <el-form-item label="置顶" prop="topping">
      <el-input v-model="dataForm.topping" placeholder="置顶"></el-input>
    </el-form-item>
    <el-form-item label="置顶时间" prop="topTime">
      <el-input v-model="dataForm.topTime" placeholder="置顶时间"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          articleId: 0,
          articleName: '',
          acticleImg: '',
          creator: '',
          createTime: '',
          categoryId: '',
          articeStatus: '',
          articleContent: '',
          ifOriginal: '',
          originator: '',
          originalSource: '',
          recommendId: '',
          clickNum: '',
          openComments: '',
          articleDesc: '',
          topping: '',
          topTime: ''
        },
        dataRule: {
          articleName: [
            { required: true, message: '文章名称不能为空', trigger: 'blur' }
          ],
          acticleImg: [
            { required: true, message: '标题图不能为空', trigger: 'blur' }
          ],
          creator: [
            { required: true, message: '创建人不能为空', trigger: 'blur' }
          ],
          createTime: [
            { required: true, message: '创建时间不能为空', trigger: 'blur' }
          ],
          categoryId: [
            { required: true, message: '分类id不能为空', trigger: 'blur' }
          ],
          articeStatus: [
            { required: true, message: '文章状态不能为空', trigger: 'blur' }
          ],
          articleContent: [
            { required: true, message: '文章内容不能为空', trigger: 'blur' }
          ],
          ifOriginal: [
            { required: true, message: '是否原创不能为空', trigger: 'blur' }
          ],
          originator: [
            { required: true, message: '原创者不能为空', trigger: 'blur' }
          ],
          originalSource: [
            { required: true, message: '原创来源不能为空', trigger: 'blur' }
          ],
          recommendId: [
            { required: true, message: '推荐出处不能为空', trigger: 'blur' }
          ],
          clickNum: [
            { required: true, message: '点击数不能为空', trigger: 'blur' }
          ],
          openComments: [
            { required: true, message: '开启评论不能为空', trigger: 'blur' }
          ],
          articleDesc: [
            { required: true, message: '文章简介不能为空', trigger: 'blur' }
          ],
          topping: [
            { required: true, message: '置顶不能为空', trigger: 'blur' }
          ],
          topTime: [
            { required: true, message: '置顶时间不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.articleId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.articleId) {
            this.$http({
              url: this.$http.adornUrl(`/blog/article/info/${this.dataForm.articleId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.articleName = data.article.articleName
                this.dataForm.acticleImg = data.article.acticleImg
                this.dataForm.creator = data.article.creator
                this.dataForm.createTime = data.article.createTime
                this.dataForm.categoryId = data.article.categoryId
                this.dataForm.articeStatus = data.article.articeStatus
                this.dataForm.articleContent = data.article.articleContent
                this.dataForm.ifOriginal = data.article.ifOriginal
                this.dataForm.originator = data.article.originator
                this.dataForm.originalSource = data.article.originalSource
                this.dataForm.recommendId = data.article.recommendId
                this.dataForm.clickNum = data.article.clickNum
                this.dataForm.openComments = data.article.openComments
                this.dataForm.articleDesc = data.article.articleDesc
                this.dataForm.topping = data.article.topping
                this.dataForm.topTime = data.article.topTime
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/blog/article/${!this.dataForm.articleId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'articleId': this.dataForm.articleId || undefined,
                'articleName': this.dataForm.articleName,
                'acticleImg': this.dataForm.acticleImg,
                'creator': this.dataForm.creator,
                'createTime': this.dataForm.createTime,
                'categoryId': this.dataForm.categoryId,
                'articeStatus': this.dataForm.articeStatus,
                'articleContent': this.dataForm.articleContent,
                'ifOriginal': this.dataForm.ifOriginal,
                'originator': this.dataForm.originator,
                'originalSource': this.dataForm.originalSource,
                'recommendId': this.dataForm.recommendId,
                'clickNum': this.dataForm.clickNum,
                'openComments': this.dataForm.openComments,
                'articleDesc': this.dataForm.articleDesc,
                'topping': this.dataForm.topping,
                'topTime': this.dataForm.topTime
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
